<template>
    <div class="vitalSignsContent" :style="{'height':(height==null?divAutoHeight:height)+'px','width':(width==null?divAutoWidth:width)+'px', 'overflow-y':'auto'}">
              <h3 class="dialog-plate-title"><span>当日数据</span></h3>
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="查看" name="1">
                    <el-form :inline="true" ref='stressM' :model="dialogForStress" label-width="100px" class="demo-ruleForm" :rules="chestRules">
                        <el-form-item label="压力评分" prop="stressScore" ><el-input v-model="dialogForStress.stressScore"></el-input></el-form-item>
                        <el-form-item label="平均心率" prop="meanHeartRate" ><el-input v-model="dialogForStress.meanHeartRate"></el-input></el-form-item>
                        <el-form-item label="异常心率" prop="abnormalHeartRate" ><el-input v-model="dialogForStress.abnormalHeartRate"></el-input></el-form-item>
                        <el-form-item label="血管阶段" prop="bloodStage" ><el-input v-model="dialogForStress.bloodStage"></el-input></el-form-item>
                        <el-form-item label="检测护士"><el-input v-model="dialogForStress.checkUserName" disabled></el-input></el-form-item>
                        <el-table-column>
                        <template></template>
                            <div style="width:100%;height:50px;text-align:left;line-height:50px;position :relative;top:41px;left:190px;z-index:9999; ">
                            <!-- <el-button type="primary" @click="submitDialogForStress" >提交</el-button> -->
                            </div>
                        </el-table-column>
                        <el-form-item label="附件上传" prop="photo" style="display:block;">
                            <template slot="label">检测图片</template>
                            <div :span="19" class="avatar">
                            <el-upload
                                    class="upload-demo"
                                    ref="uploadImageBox"
                                    :action="dialogForStress.actionUrl"
                                    :on-success="updateImageSize"
                                    list-type="picture">
                                    <!-- <el-button size="small" type="primary">点击上传</el-button> -->
                                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                                <div v-for="item in fileList" style="width:1060px;height:1520px;">
                                    <img :src="item.url" style="width:1060px;height:1520px;">
                                </div>
                            </div>
                        </el-form-item>
                    </el-form> 
                </el-collapse-item> 
                <h3 class="dialog-plate-title"><span>历史数据</span></h3>
                <el-collapse-item title="查看" name="2">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                         stripe border>
                        <el-table-column prop="stressScore" label="压力评分" min-width="120"></el-table-column>
                        <el-table-column prop="meanHeartRate" label="平均心率" min-width="120"></el-table-column>
                        <el-table-column prop="abnormalHeartRate" label="异常心率" min-width="120"></el-table-column>
                        <el-table-column prop="bloodStage" label="血管阶段" min-width="120"></el-table-column>
                        <el-table-column prop="checkUserName" label="检测护士" min-width="120"></el-table-column>
                    </el-table>
                 </el-collapse-item>
              </el-collapse>     
    </div>
</template>
<script>
import bodyCheckApi from 'plugins/myaxios/bodycheck/bodyCheck.js';
export default {
    props:['width','height','idCard','cVal','bodyRecodeId','providerId'],
    data(){
        return{
            fileList:[],
            activeNames:['1','2'],
            tableData:[],
            vitalsigns:{
                createNurseName:localStorage.getItem('ms_username'),
                weight:'',
                animalHeat:'',
                pulse:'',
                lowBlood:'',
                highBlood:'',
            },
            dialogForStress:{
                actionUrl:'/uploadCheckImage/{id}/{type}',
                id:null,//Id
                bid:null,// 体检ID
                filePath:null,//图片路径，可存储多个，中间用$$隔开
                checkDate:null,//检测时间
                checkUser:null,//检测护士
                meanHeartRate:null,//平均心率
                abnormalHeartRate:null,//异常心率
                bloodStage:null,//血管阶段
                stressScore:null,//压力评分
                checkUserName:localStorage.getItem('ms_username'),//上传护士
                images:null,              //图片内容
                cVal:false,
            },
            chestRules:{
                result:[ {required: true, message: '请选择是否合格', trigger: 'blur'}],
                hospital:[{required: true, message: '请输入检查单位', trigger: 'blur'}],
                doctor:[{required: true, message: '请输入检查医生', trigger: 'blur'}],
                remark:[{required: true, message: '请输入检查备注', trigger: 'blur'}],
                validDate:[{required: true, message: '请输入有效日期', trigger: 'blur'}],
                photo:[{required: true, message: '请上传病例照片', trigger: 'blur'}],
            },
        }
    },
    created(){
        this.$nextTick(()=>{
            let self = this;
            self.init();
        });        
    },
    watch:{
        idCard(newData,oldData){
            let self = this;
            console.log(newData);
            self.idCard = newData;
        },
        cVal(newData,oldData){
            let self = this;
            self.queryBloodvessel();
            self.queryBloodvesselList();
        },
        bodyRecodeId(newData,oldData){
            let self = this;

        },
    },
    computed:{
        divAutoHeight(){
            return this.$store.state.clientHeight;
        },
        divAutoWidth(){
            return this.$store.state.clientWidth;
        },
        tableHeight() {
            return this.$store.state.clientHeight - 184;
        },
    },
    methods:{
        //进行插件封装
        init(){
            let self = this;
            self.queryBloodvessel();
            self.queryBloodvesselList();
        },
        submitDialog(){/** 更新后台信息*/
            let self = this;
            self.loading=true;
            let params = {
                weight:self.dialogList.weight,
                animalHeat:self.dialogList.animalHeat,
                pulse:self.dialogList.pulse,
                lowBlood:self.dialogList.lowBlood,
                highBlood:self.dialogList.highBlood,
                bodyRecodeId:self.dialogList.bodyRecodeId,
            }
            bodyCheckApi.addUpdataCheckBodyInfo(params).then(res=>{
                self.$message.success('信息编辑成功！');
            },error=>{
            })
        },
        //查询数据
        queryVitalSigns(){
            let self = this;
            bodyCheckApi.queryVitalSigns(self.bodyRecodeId).then(res=>{
                self.vitalsigns = res.content;
           },error=>{
            })
        },
        updateImageSize(response, file, fileList){
            let self = this;
            let imageObj={name:file.name,url:'data:image/png;base64,'+response.content};
            self.fileList.push(imageObj);
        },
        queryBloodvessel(){
            let self = this;
            bodyCheckApi.queryBloodvessel(self.bodyRecodeId).then(res=>{
                self.$refs.uploadImageBox.clearFiles();
                self.fileList=[];
                self.copyQueryDataToFormData(res.content);
                let images = res.content.images; 
                images.forEach(element => {
                    self.fileList.push({name:Math.random(1000),url:element});
                });
            });
        },
        queryBloodvesselList(){
            let self = this;
            bodyCheckApi.queryBloodvesselList(self.providerId).then(res=>{
                self.tableData = res.content;
            });
        },
        copyQueryDataToFormData(row){
            let self = this;
            if(row!=null&&row!=undefined){
                self.dialogForStress.id = row.id;
                self.dialogForStress.actionUrl=bodyCheckApi.idImgUploadForStress(self.dialogForStress.id);
                self.dialogForStress.bid = row.bid;
                self.dialogForStress.filePath = row.filePath;
                self.dialogForStress.checkDate = row.checkDate;
                self.dialogForStress.checkUser = row.checkUser;
                self.dialogForStress.meanHeartRate = row.meanHeartRate;
                self.dialogForStress.abnormalHeartRate = row.abnormalHeartRate;
                self.dialogForStress.bloodStage = row.bloodStage;
                self.dialogForStress.stressScore = row.stressScore;
                self.dialogForStress.checkUserName = row.checkUserName==null?localStorage.getItem('ms_username'):row.checkUserName;
                self.dialogForStress.images = row.images;
                //         bid:null,// 体检ID
                // filePath:null,//图片路径，可存储多个，中间用$$隔开
                // checkDate:null,//检测时间
                // checkUser:null,//检测护士
                // meanHeartRate:null,//平均心率
                // abnormalHeartRate:null,//异常心率
                // bloodStage:null,//血管阶段
                // stressScore:null,//压力评分
                // checkUserName:localStorage.getItem('ms_username'),//上传护士
                // images:null,              //图片内容
            }
            self.tableData.push(self.dialogForStress);

        },
        handleChange(val){
            let self = this;
        },
        handleSelectionChange(val){
            let self = this;
        },
    },
}
</script>
<style scoped>
.vitalSignsContent{
}
</style>